<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<style>
		button {
			width: 50px;
			height: 30px;
		}
    </style>
<body>
	 <input type="text" id="result" value="0" readonly>
	 <button onclick="cal('←')">←</button>
	 <button onclick="cal('C')">C</button>
	 <button onclick="cal('(')">(</button>
	 <button onclick="cal(')')">)</button>
	 <button onclick="cal('%')">%</button>
	 <button onclick="cal('7')">7</button>
	 <button onclick="cal('8')">8</button>
	 <button onclick="cal('9')">9</button>
	 <button onclick="cal('+')">+</button>
	 <button onclick="cal('4')">4</button>
	 <button onclick="cal('5')">5</button>
	 <button onclick="cal('6')">6</button>
	 <button onclick="cal('-')">-</button>
	 <button onclick="cal('1')">1</button>
	 <button onclick="cal('2')">2</button>
	 <button onclick="cal('3')">3</button>
	 <button onclick="cal('*')">*</button>
	 <button onclick="cal('0')">0</button>
	 <button onclick="cal('.')">.</button>
	 <button onclick="cal('=')">=</button>
	 <button onclick="cal('/')">/</button>
	<script >
		function cal(value) {
    const input = document.getElementById('result');
    const currentValue = input.value;
	if (value === 'C') {
		input.value = '0';
	} else if (value === '←') {
		if (currentValue.length > 1) {
			input.value = currentValue.slice(0, -1);
		} else {
			input.value = '0';
		}
	} else if (value === '=') {
		try {
			let result = eval(currentValue);
			if (!isFinite(result)) {
				input.value = "ERROR";
			} else {
				result = result.toFixed(15);
				input.value = result;
			}
		} catch (error) {
			input.value = "ERROR";
		}
	} else {
		if (currentValue === '0') {
			input.value = value;
		} else {
			input.value += value;
		}
	}
}	
	</script>
	</body>
</html>
